<template>
  <div class="user-dept-ctl-select">
    <!-- <a-input class="search" v-model:value="word" placeholder="请输入" /> -->
    <div class="checkbox-group">
      <div v-for="it in listCopy" :key="it.value">
        <a-checkbox v-model:checked="it.checked" @change="onChange(it)">
          {{ it.label }}
        </a-checkbox>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import cloneDeep from 'lodash/cloneDeep';
import { IsUserDept } from '@/global/util/common';

export default defineComponent({
  name: 'UserDeptCtlSelect',
  components: {},
  props: {
    formCards: {
      type: Array as any,
      default: () => [],
    },
    list: {
      type: Array as any,
      default: () => [],
    },
    ckeckList: {
      type: Array,
      default: () => [],
    },
  },
  setup(prop, context) {
    const word = ref('');
    const listCopy = computed(() => {
      let filterList: any = IsUserDept(prop.formCards);
      filterList = filterList.map((it: any) => {
        return {
          label: it.cardName,
          value: it.cardCode,
          type: 'userDeptCtl',
        };
      });
      return filterList.map((el: any) => {
        const item = prop.ckeckList.find((it: any) => it.value === el.value);
        el.checked = !!item;
        return el;
      });
    });
    const onChange = (item: any) => {
      let arr = [];
      if (item.checked) {
        arr = prop.ckeckList.concat(item);
      } else {
        arr = prop.ckeckList.filter((it: any) => it.value !== item.value);
      }
      context.emit('update:ckeckList', arr);
    };

    return {
      word,
      listCopy,
      onChange,
    };
  },
});
</script>
<style lang="less" scoped>
.user-dept-ctl-select {
  .search {
    margin-bottom: 4px;
    border-radius: 4px;
  }
  .checkbox-group {
    width: 100%;
    height: 270px;
    padding: 5px 12px;
    line-height: 28px;
    border: 1px solid @rb-border-color;
    border-radius: 4px;
    overflow-y: auto;
  }
}
</style>
